<template>
    <div class="main-container">
        <navbar title="图片分享详情"></navbar>
        <div class="photoinfoContainer">
            <h1>{{info.title}}</h1>
            <p class="secondtitle">
                <span>{{info.author}}</span>
                <span>{{info.date | dateFormat}}</span>
            </p>
            <div class="imglist">
                <ul class="mui-table-view mui-grid-view mui-grid-9">
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" v-for="(item, index) in info.imglist" :key="index">
                        <img class="preview-img" :src="item.src" @click="$preview.open(index, info.imglist)">
                    </li>
                </ul>
            </div>
            <div class="content">
                {{info.content}}
            </div>
            <!-- 评论区 传递参数给子组件-->
            <comment-box :id="infoid"></comment-box>
        </div>
    </div>

</template>

<script>
    // 导入评论子组件
    import comments from '../comments.vue'
    import NavBar from '../common/navbar.vue'
    export default {
        data() {
            return {
                infoid: this.$route.params.id,
                info: {
                    title: '测试测试测试测试测试',
                    author: '11111111',
                    date: new Date(),
                    imglist: [{
                            src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
                            msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
                            alt: 'picture1',
                            title: 'Image Caption 1',
                            w: 600,
                            h: 400
                        },
                        {
                            src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
                            msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
                            alt: 'picture2',
                            title: 'Image Caption 2',
                            w: 1200,
                            h: 900
                        },
                        {
                            src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533481729&di=9278bb3c0306554906491ef83ac6000d&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.xiudodo.com%2Ffigure%2F00%2F00%2F33%2F16%2F73%2F1655bda6abbcd26.jpg',
                            msrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533481729&di=9278bb3c0306554906491ef83ac6000d&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.xiudodo.com%2Ffigure%2F00%2F00%2F33%2F16%2F73%2F1655bda6abbcd26.jpg',
                            alt: 'picture1',
                            title: 'Image Caption 1',
                            w: 600,
                            h: 400
                        },
                        {
                            src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533481754&di=16cd439c5aea4baf2733d64543e22772&imgtype=jpg&er=1&src=http%3A%2F%2Fold.bz55.com%2Fuploads%2Fallimg%2F121128%2F1-12112Q00036.jpg',
                            msrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533481754&di=16cd439c5aea4baf2733d64543e22772&imgtype=jpg&er=1&src=http%3A%2F%2Fold.bz55.com%2Fuploads%2Fallimg%2F121128%2F1-12112Q00036.jpg',
                            alt: 'picture1',
                            title: 'Image Caption 1',
                            w: 600,
                            h: 400
                        },
                        {
                            src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532887048371&di=60078f2e9908544dcb5aab4ac0ccb485&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fblog%2F201404%2F06%2F20140406232455_m5XVy.jpeg',
                            msrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532887048371&di=60078f2e9908544dcb5aab4ac0ccb485&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fblog%2F201404%2F06%2F20140406232455_m5XVy.jpeg',
                            alt: 'picture1',
                            title: 'Image Caption 1',
                            w: 600,
                            h: 400
                        },
                        {
                            src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532887059548&di=c382acfd26914537f4c3a261eac55c9a&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fe%2F58fb005766f6b.jpg',
                            msrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532887059548&di=c382acfd26914537f4c3a261eac55c9a&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fe%2F58fb005766f6b.jpg',
                            alt: 'picture1',
                            title: 'Image Caption 1',
                            w: 600,
                            h: 400
                        },
                        {
                            src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532887069382&di=e86660e14b1ab348311321ce9499f820&imgtype=0&src=http%3A%2F%2Fwww.zcool.com.cn%2Fcommunity%2F037dd30582481f7a84a0d304f0db5d6.jpg',
                            msrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532887069382&di=e86660e14b1ab348311321ce9499f820&imgtype=0&src=http%3A%2F%2Fwww.zcool.com.cn%2Fcommunity%2F037dd30582481f7a84a0d304f0db5d6.jpg',
                            alt: 'picture1',
                            title: 'Image Caption 1',
                            w: 600,
                            h: 400
                        },
                        {
                            src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532887081233&di=2dc005d8933c4b42c0fbac102658fb22&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F17%2F63%2F59%2F71W58PIC5hX_1024.jpg',
                            msrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532887081233&di=2dc005d8933c4b42c0fbac102658fb22&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F17%2F63%2F59%2F71W58PIC5hX_1024.jpg',
                            alt: 'picture1',
                            title: 'Image Caption 1',
                            w: 600,
                            h: 400
                        }
                    ],
                    content: '里核心电商业务全年收入增长60%，增幅亦为上市以来最大，这一强劲增长得益于多个领域的贡献，包括投资于内容与科技以加强中国零售平台的个性化，海外和跨境零售平台通过自身增长及并购实现壮大，以及透过新零售等线上线下整合将集团的总目标市场延展至电商之外的领域。核心电商业务的国际化方面，东南亚平台Lazada及全球零售平台全球速卖通（AliExpress）强劲增长，带动国际零售业务全年收入同比增长94%。'
                }
            }
        },
        mounted() {

        },
        methods: {
            handleClose() {
                console.log('close event')
            }
        },
        //注册子组价
        components: {
            'comment-box': comments,
            navbar: NavBar
        }
    }
</script>

<style lang="scss" scoped>
    .photoinfoContainer {
        padding: 10px;

        .imglist {

            ul,
            li {
                list-style: none;
                margin: 0;
                padding: 0;
            }
            ul {
                display: flex;
                flex-wrap: wrap;
                background: none;
            }
            li {
                // margin-bottom: 10px;
                padding: 5px 0;
            }
            img {
                width: 90%;
                min-height: 100%;
                box-shadow: 0 0 10px #000;
                vertical-align: middle
            }
        }
        .content {
            word-break: break-word;
            font-size: 16px;
            color: #333;
            margin-bottom: 20px;
        }
    }
</style>